 <%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
<div class="row-fluid">
		<div class="span12">
			<div class="box gradient">
				<div class="title">
					<h4><span>Parameter</span>
					</h4>
					<a href="#" class="minimize">Minimize</a>
				</div>
				<div class="content scrollable clearfix">
					<table class="ajaxTable display table table-bordered">
						<thead>
							<tr>
								<th>Name </th>
								<th>Description</th>
								<th>Action</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			
			</div>

	<a href="#newGroup"  data-toggle="modal" class="btn btn-info"> <span
	class="icon12 icomoon-icon-plus white"></span> New</a>
			
		</div>
	</div>


<script type="text/javascript">

var render = false;
var oTime = "";
var oTable;
$(document).ready(function () {
	oTable = $('.ajaxTable').dataTable({
		"bLengthChange": true,
//		"aoColumnDefs": [
//		  { 'bSortable': false, 'aTargets': [0,6] }
//		],
		"sAjaxSource": '${ctx}/parameter-group/',
		"fnInitComplete": function (oSettings, json) { }
	});
	var name = $("<input>").attr({
		type: "text",
		field: "name",
		op: "cn",
		placeholder: "UserName",
		class: "filterdata"
	});
	var searchLabel = $("<label>").html("Search:").css("display", "inline");
	var filterDiv = $("<div>").addClass("dataTables_filter").append(searchLabel).append(name);
	$('.dataTables_wrapper').prepend(filterDiv);

	
	johnny.resetFilter($('.reset'));

	$(".datepickerlazy").datepicker({
		dateFormat: 'yy-mm-dd',
		onSelect: function () {
			updateGrid();
		}
	}).keydown(function (event) {
		if (event.keyCode == 8) { $(".datepickerlazy").val(""); }
		else { event.preventDefault(); }
	});

	$(".filterdata").keyup(function () {
		updateGrid();
	});
	$('#confirmParameterGroup').click(function(){
		$.ajax({
			url : "${ctx}/parameter-group/create/",
			type : "PUT",
			data : $('#parameterGroupForm').serialize(),
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
//					$('#newParameter').modal('hide')
					$("#newGroup").modal('hide');
					updateGrid();
					johnny.info("create new Group successfully");
					}
			}
		});


	});



	
});
function updateGrid() {
	window.clearTimeout(oTime);
	oTime = setTimeout(function () { oTable.fnDraw(); }, 500);
}

var columnHeader = ['name', 'description'];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}

var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
		var subArray = new Array();
		subArray.push(json.result[i].name);
		subArray.push(json.result[i].description);
		subArray.push(actionHtml(json.result[i].id));
		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}
function actionHtml(id) {
	var mainSpan = $("<span>");
	var controlDiv = $("<div>").addClass("controls center").appendTo(mainSpan);
	var href = $("<a>").attr({
		href: "${ctx}/parameter-group/"+id+"/edit/",
		title: "Edit"
	}).addClass("tip").appendTo(controlDiv);
	var span = $("<span>").addClass("icon12 icomoon-icon-pencil").appendTo(href);
	return mainSpan.html();
}
</script>
<div id="newGroup" class="modal hide fade" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New Parameter Group </h3>
	</div>
	<div class="modal-body">
 				<form method="post" id="parameterGroupForm">
						<div class="form-row row-fluid">
							<label class="form-label span4">Name</label>
							<input class="span8" name="name" />
						</div>
						<div class="form-row row-fluid">
							<label class="form-label span4">Description</label>
							<input class="span8" name="description"  />
						</div>
				</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" id ="confirmParameterGroup" class="btn btn-primary">Save changes</a>
	</div>
</div>


<body>

